import React, { createContext, useContext } from "react";

const context1 = createContext();
const context2 = createContext();

// useContext是用来给函数组件来简化Consumer的接收的
// createContext以及Provider依旧是要用的
const Child2 = () => {
  const { name } = useContext(context1);
  const { nickName } = useContext(context2);

  return (
    <div>
      child2组件 - <span>{name}</span> - <span>{nickName}</span>
    </div>
  );
};

// const Child2 = () => {
//   return (
//     <div>
//       child2组件 -{" "}
//       <context1.Consumer>
//         {(value) => (
//           <span>
//             {value.name} -{" "}
//             <context2.Consumer>
//               {(val) => <span>{val.nickName}</span>}
//             </context2.Consumer>
//           </span>
//         )}
//       </context1.Consumer>
//     </div>
//   );
// };

const Child1 = () => {
  return (
    <context2.Provider
      value={{
        nickName: "cxk",
      }}
    >
      <div>child1组件</div>
      <Child2 />
    </context2.Provider>
  );
};

const App = () => {
  return (
    <context1.Provider
      value={{
        name: "tom",
      }}
    >
      <h2>useContext</h2>
      <Child1 />
    </context1.Provider>
  );
};

export default App;
